<template>
    <view class="page">
        <view class="person-title">
            <view class="vertical"></view>
            <view class="title">个人资料</view>
        </view>
        <view class="person-content">
            <view class="person-content-left">
                <img :src="dataList.photo_url" />
                <img class="icon" :src="File_Url+'vip-icon.png'" v-if="dataList.is_vip==1" />
            </view>
            <view class="person-content-center">
                <view class="name">
                    {{dataList.realname==null?dataList.nickname:dataList.realname}}
                    <img :src="File_Url+'sex-man.png'" v-if="dataList.sex=='男'"/>
                    <img :src="File_Url+'sex-woman.png'" v-if="dataList.sex=='女'"/>
                </view>
                <view class="phone" v-if="dataList.phone!=null" @click="callPhone(dataList.phone)">{{dataList.phone}}</view>
            </view>
<!--            <view class="person-content-right">资讯行业</view>-->
        </view>
        <view class="company-title">
            <view class="vertical"></view>
            <view class="title">单位资料</view>
        </view>
        <view class="company-content">
            <view class="company-head" v-if="dataList.unit_logo.length>0">
                <view class="img">
                    <img :src="dataList.unit_logo" />
                    <img class="icon" :src="File_Url+'vip-icon.png'" v-if="dataList.is_vip==1" />
                </view>

            </view>
            <view class="company-item">
                <text>单位名称</text>
                <text class="right grey">{{dataList.unit_name}}</text>
            </view>
            <view class="company-item">
                <text>联系方式</text>
                <text @click="callPhone(dataList.unit_contact)" class="right blue" v-if="dataList.unit_contact!=null">{{dataList.unit_contact}}</text>
                <text class="right" v-else>***********</text>
            </view>
<!--            <view class="company-item">-->
<!--                <text>官方代表人</text>-->
<!--                <text class="grey">张三</text>-->
<!--            </view>-->
            <view class="company-item">
                <text>统一社会信用代码</text>
                <text class="right grey">{{dataList.unit_credit_code}}</text>
            </view>
            <view class="company-range">
                <view class="left">业务范围</view>
                <view class="right">
                    <text v-for="(item,index) in dataList.unit_label" :key="index">{{item}}</text>
                </view>
            </view>
        </view>

        <view class="business-title" v-if="adminId==myId||userId == myId">
            <view class="vertical"></view>
            <view class="title">业务情况</view>
        </view>
        <view class="business-content" v-if="adminId==myId||userId == myId">
            <view class="null" v-if="dataList.butt_info.business_situation==null">
                暂无数据
            </view>
            <view class="content-text" v-if="dataList.butt_info.business_situation!=null">
                {{dataList.butt_info.business_situation}}
            </view>
        </view>

        <view class="business-title" v-if="adminId==myId||userId == myId">
            <view class="vertical"></view>
            <view class="title">成功案例/相关资质</view>
        </view>
        <view class="business-content" v-if="adminId==myId||userId == myId">
            <view class="null" v-if="dataList.butt_info.case_img_list.length==0">
                暂无数据
            </view>
            <view class="content-img" v-if="dataList.butt_info.case_img_list.length>0">
                <div class="img" v-for="(item,index) in dataList.butt_info.case_img_list" :key="index">
                    <img :src="item.img_url" mode="aspectFill" @click="previewImage(index,dataList.butt_info.case_img_list)" />
                </div>
            </view>
        </view>
        <view class="business-title" v-if="dataList.butt_info.phone!=''||dataList.butt_info.wechat!=''||dataList.butt_info.email!=''">
            <view class="vertical"></view>
            <view class="title">其他</view>
        </view>
        <view class="company-content" v-if="dataList.butt_info.phone!=''||dataList.butt_info.wechat!=''||dataList.butt_info.email!=''">
            <view class="company-item" v-if="dataList.butt_info.phone!=''">
                <text>手机号</text>
                <text @click="callPhone(dataList.butt_info.phone)" class="right blue" v-if="dataList.butt_info.phone!=null">{{dataList.butt_info.phone}}</text>
            </view>
            <view class="company-item" v-if="dataList.butt_info.wechat!=''">
                <text>微信号</text>
                <text class="right grey">{{dataList.butt_info.wechat}}</text>
            </view>
            <view class="company-item" v-if="dataList.butt_info.email!=''">
                <text>邮箱</text>
                <text class="right grey">{{dataList.butt_info.email}}</text>
            </view>
        </view>

        <view class="page-bottom-btn" v-if="adminId==myId&&dataList.status==0">
            <button class="red" @click="operateDemandJoiner(2)">淘汰</button>
            <button class="blue" @click="operateDemandJoiner(1)">接受</button>
        </view>
    </view>
</template>

<script>
    export default {
        name: "buttjointDetail",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                needId: '',
                userId: '',
                adminId: '',
                myId: uni.getStorageSync('UserId'),
                dataList: {}
            }
        },
        onLoad(query){
            this.needId = query.needId;
            this.userId = query.userId;
            this.adminId = query.adminId
            this.getMyDemandButtDetail();
        },
        methods:{
            //获取对接我需求的用户信息
            async getMyDemandButtDetail(){
                let params = {
                    demand_id: this.needId,
                    user_id: this.userId,
                    user_token: uni.getStorageSync('userToken'),
                }
                const res = await this.$api.getMyDemandButtDetail(params);
                if (res.data.level == 'success'){
                    this.dataList = res.data.data
                }
            },
            //操作（淘汰、接受）对接者
            async operateDemandJoiner(id){
                let params = {
                    demand_id: this.needId,
                    user_id: this.userId,
                    user_token: uni.getStorageSync('userToken'),
                    type: id
                }
                const res = await this.$api.operateDemandJoiner(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.navigateBack({
                            delta:1
                        })
                    },3000)
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                }
            },
            //拨打手机号
            callPhone(number){
                uni.showModal({
                    title: '提示',
                    content: '将转到拨号界面拨打'+number+'，是否进行？',
                    success: function (res) {
                        if (res.confirm) {
                            uni.makePhoneCall({
                                phoneNumber: number
                            });
                        } else if (res.cancel) {
                            uni.showToast({
                                icon:'none',
                                title: "取消成功！"
                            })
                        }
                    }
                })
            },
            //预览图片
            previewImage(index,data){
                let imgList = [];
                for (let i = 0 ; i < data.length ; i++){
                    imgList.push(data[i].img_url)
                }
                uni.previewImage({
                    current:index,
                    urls: imgList
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        padding-bottom: 148rpx;
        min-height: calc(100vh - 148rpx);
        @include flex(flex-start,flex-start);
        flex-direction: column;
    }
    .person-title{
        padding: 20rpx 30rpx 6rpx 30rpx;
        width: calc(100vw - 60rpx);
        @include flex(flex-start);
        flex-direction: row;
        .vertical{
            width: 8rpx;
            height: 40rpx;
            background: #3782FF;
            border-radius: 4rpx;
        }
        .title{
            height: 45rpx;
            line-height: 45rpx;
            font-weight: bold;
            font-size: 32rpx;
            padding: 0 10rpx;
        }
    }
    .person-content{
        padding: 30rpx;
        @include flex(flex-start,flex-start);
        width: calc(100vw - 60rpx);
        flex-direction: row;
        background: #FFFFFF;
        .person-content-left{
            width: 108rpx;
            height: 108rpx;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                border-radius: 360rpx;
            }
            .icon{
                position: absolute;
                right: 0rpx;
                width: 30rpx;
                height: 30rpx;
                bottom: 0;
            }
        }
        .person-content-center{
            padding-left: 30rpx;
            @include flex(center,flex-start);
            flex-direction: column;
            .name{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                margin-bottom: 14rpx;
                @include flex(flex-start);
                flex-direction: row;
                img{
                    width: 45rpx;
                    height: 45rpx;
                    margin-left: 11rpx;
                }
            }
            .phone{
                height: 45rpx;
                line-height: 45rpx;
                color: #3782FF;
                font-size: 32rpx;
            }
        }
        .person-content-right{
            margin-left: auto;
            color: #0A5FEC;
            font-size: 24rpx;
        }
    }
    .company-title,.business-title{
        padding: 40rpx 30rpx 6rpx 30rpx;
        width: calc(100vw - 60rpx);
        @include flex(flex-start);
        flex-direction: row;
        .vertical{
            width: 8rpx;
            height: 40rpx;
            background: #3782FF;
            border-radius: 4rpx;
        }
        .title{
            height: 45rpx;
            line-height: 45rpx;
            font-weight: bold;
            font-size: 32rpx;
            padding: 0 10rpx;
        }
    }

    .company-content{
        background: #FFFFFF;
        width: 100vw;
        view{
            border-bottom: 1rpx solid #E5E5E5;
        }
        view:last-child{
            border-bottom: none;
        }
        .company-head{
            padding: 30rpx 0;
            @include flex();
            flex-direction: column;
            .img{
                height: 164rpx;
                width: 164rpx;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 360rpx;
                }
                .icon{
                    position: absolute;
                    right: 0rpx;
                    width: 50rpx;
                    height: 50rpx;
                    bottom: 0rpx;
                }
            }
        }
        .company-item{
            padding: 38rpx 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            .right{
                margin-left: auto;
                max-width: 80%;
                @include ellipsis(1);
                text-align: right;
            }
            .grey{
                color: #999999;
            }
            .blue{
                color: #3782FF;
            }
        }
        .company-range{
            padding: 38rpx 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            .left{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            .right{
                margin-left: auto;
                max-width: 60%;
                @include flexWrap(flex-start);
                flex-direction: row;
                text{
                    height: 45rpx;
                    padding: 0 16rpx;
                    background: #3782FF;
                    border-radius: 8rpx;
                    font-size: 32rpx;
                    line-height:45rpx;
                    margin-right: 10rpx;
                    color: #FFFFFF;
                }
            }
        }
    }
    .business-content{
        background: #FFFFFF;
        width: 100vw;
        .content-text{
            padding: 30rpx;
            line-height: 70rpx;
        }
        .content-img{
            width: 97.5vw;
            padding: 1.25vw;
            @include flexWrap(flex-start);
            flex-direction: row;
            .img{
                width: 30vw;
                height: 30vw;
                margin: 1.25vw;
                border-radius: 16rpx;
                overflow: hidden;
            }
        }
    }
    .page-bottom-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        background: #FFFFFF;
        border-top: 1rpx solid #E5E5E5;
        padding: 30rpx;
        height: 88rpx;
        width: calc(100vw - 60rpx);
        @include flex(flex-start,flex-start);
        flex-direction: row;
        button{
            padding: 0 113rpx;
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 44rpx;
        }
        button:last-child{
            margin-left: auto;
        }
        .red{
            background: #FF7171;
            color: #FFFFFF;
        }
        .blue{
            background: #3782FF;
            color: #FFFFFF;
        }
    }
    .null{
        width: 100%;
        padding: 100rpx 0;
        text-align: center;
        line-height: 50rpx;
        color: #6d6d6d;
    }
</style>